<!-- 
  v-bind 经常用
  -----
  style 里面有设置 样式
  -----

  经常使用下面场景
  1. 对象语法: 【下面的就是对象语法】、【v-bind:xx + computed(计算属性) 结合使用】
  2. 数组语法: 

  ----

  1. 对象语法
    (1)直接通过{}绑定一个类
    <h2 :class="active">hello world</h2>

    (2)通过判断，传入多个值
    <h2 v-bind:class="{active: isActive, line: isLine}">hello world</h2>

    (3)和普通的类同时存在，并不冲突
    注: 如果isActive和isLine都为true,那么会有title/active/line三个类
    <h2 class="title" v-bind:class="{active: isActive, line: isLine}">hello world</h2>
    
    (4)如果过于复杂，可以放在一个methods或者computed中
    注：classes是一个计算属性
    <h2 class="title" :class="classes">hello world</h2>
 -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    .active {
      color: red;
    }
    .line {
      color: blue;
    }
  </style>
</head>

<body>

  <div id="app">
    <!-- <h2 class="active">{{ message }}</h2>
    <h2 :class="active">{{ message }}</h2> -->

    <!-- <h2 v-bind:class="{key1: value1, key2: value2}">{{message}}</h2> -->
    <!-- <h2 v-bind:class="{类名1: boolean, 类名2: boolean}">{{message}}</h2> -->
    
    <!-- 使用google-检查- 看 html代码变化 -->
    <!-- <h2 v-bind:class="{active: true, line: false}">{{message}}</h2>
    <h2 v-bind:class="{active: false, line: true}">{{message}}</h2> -->


    <!-- 
      使用google-检查, 动态改变某值，看 html代码变化 
      1. 设置 app.isActive = false
      2. 设置 app.isLine = false
      ---------------------------
      结果：(用于按钮 `按下`~`松开`，等等)
      0-> <h2 class="active line">你好 vue</h2>
      1-> <h2 class="line">你好 vue</h2>
      2-> <h2 class>你好 vue</h2>
    -->
    <!-- <h2 v-bind:class="{active: isActive, line: isLine}">{{message}}</h2> -->
    <h2 v-bind:class="getClasses()">{{message}}</h2>

    <button v-on:click="btnClick">按钮</button>

    <!--  注意
      class 中有个多个，

      1。 合并
      2. 以最后出现为主
    -->
  </div>

  <script src="../../js/vue.js"></script>
  <script>

    const app = new Vue({
      el: '#app',
      data: {
        message: '你好 vue',
        active: 'active', //和下面 没有关系(怕误解)
        isActive: true,
        isLine: false,
      },
      methods: {
        btnClick: function() {
          this.isActive = !this.isActive;
          this.isLine = !this.isLine;
        },
        getClasses: function() {
          return {active: this.isActive, line: this.isLine}
        }
      }
    })
  </script>
</body>

</html>